<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三角形内角和演示</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        header {
            background-color: #f8f9fa;
            padding: 1rem;
            text-align: center;
        }
        .container {
            display: flex;
            flex: 1;
        }
        .geogebra-container {
            width: 600px;
            height: 500px;
            border: 1px solid #ccc;
        }
        .control-panel {
            padding: 1rem;
            width: 300px;
            background-color: #f8f9fa;
        }
        .control-panel label {
            display: block;
            margin-bottom: 0.5rem;
        }
        .control-panel input[type="range"] {
            width: 100%;
        }
        .control-panel .result {
            margin-top: 1rem;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <header>
        <h1>三角形内角和演示</h1>
    </header>
    <div class="container">
        <div id="geogebra-container" class="geogebra-container"></div>
        <div class="control-panel">
            <form id="control-form">
                <label for="ax">点A的x坐标</label>
                <input type="range" id="ax" min="-10" max="10" step="0.1" value="0">
                <label for="ay">点A的y坐标</label>
                <input type="range" id="ay" min="-10" max="10" step="0.1" value="0">
                <label for="bx">点B的x坐标</label>
                <input type="range" id="bx" min="-10" max="10" step="0.1" value="5">
                <label for="by">点B的y坐标</label>
                <input type="range" id="by" min="-10" max="10" step="0.1" value="0">
                <label for="cx">点C的x坐标</label>
                <input type="range" id="cx" min="-10" max="10" step="0.1" value="2.5">
                <label for="cy">点C的y坐标</label>
                <input type="range" id="cy" min="-10" max="10" step="0.1" value="4">
            </form>
            <div class="result" id="angle-sum">当前三角形内角和: 180°</div>
        </div>
    </div>

    <script src="https://cdn.geogebra.org/apps/deployggb.js"></script>
    <script>
        // GeoGebra 初始化参数
        const parameters = {
            appName: "classic",
            width: "600",
            height: "500",
            showToolBar: true,
            showAlgebraInput: false,
            showMenuBar: false,
            allowStyleBar: true,
            enable3d: false,
            appletOnLoad: function(api) {
                initializeShape(api);
            },
            language: "zh-CN",
        };

        let applet;

        window.onload = function() {
            applet = new GGBApplet(parameters, true);
            applet.inject('geogebra-container');
        };

        function initializeShape(api) {
            // 创建初始三角形
            api.evalCommand('A = (0, 0)');
            api.evalCommand('B = (5, 0)');
            api.evalCommand('C = (2.5, 4)');
            api.evalCommand('Triangle[A, B, C]');
            updateAngleSum(api);

            // 添加滑块事件监听器
            document.querySelectorAll('input[type="range"]').forEach(input => {
                input.addEventListener('input', () => {
                    const ax = parseFloat(document.getElementById('ax').value);
                    const ay = parseFloat(document.getElementById('ay').value);
                    const bx = parseFloat(document.getElementById('bx').value);
                    const by = parseFloat(document.getElementById('by').value);
                    const cx = parseFloat(document.getElementById('cx').value);
                    const cy = parseFloat(document.getElementById('cy').value);

                    api.evalCommand(`A = (${ax}, ${ay})`);
                    api.evalCommand(`B = (${bx}, ${by})`);
                    api.evalCommand(`C = (${cx}, ${cy})`);

                    updateAngleSum(api);
                });
            });
        }

        function updateAngleSum(api) {
            // 计算并更新三角形内角和
            const angleA = api.getValue('Angle[A, B, C]');
            const angleB = api.getValue('Angle[B, C, A]');
            const angleC = api.getValue('Angle[C, A, B]');

            const sum = angleA + angleB + angleC;
            document.getElementById('angle-sum').textContent = `当前三角形内角和: ${sum.toFixed(2)}°`;
        }
    </script>
</body>
</html>